import {
  HeatmapLayer,
  LayerEvent,
  LineLayer,
  MapboxScene,
  AMapScene,
  SceneEvent,
  Marker,
  PointLayer,
  PolygonLayer,
  Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import styles from './World.css'

function App() {
  return (
    <Button variant="contained" color="primary">
      你好，世界
    </Button>
  );
}

const colors = [
  '#f7fcf0',
  '#e0f3db',
  '#ccebc5',
  '#a8ddb5',
  '#7bccc4',
  '#4eb3d3',
  '#2b8cbe',
  '#08589e',
].reverse();
function joinData(geodata: any, ncovData: any) {
  const ncovDataObj: any = {};
  ncovData.forEach((item: any) => {
    const {
      countryName,
      countryEnglishName,
      currentConfirmedCount,
      confirmedCount,
      suspectedCount,
      curedCount,
      deadCount,
    } = item;
    if (countryName === '中国') {
      if (!ncovDataObj[countryName]) {
        ncovDataObj[countryName] = {
          countryName,
          countryEnglishName,
          currentConfirmedCount: 0,
          confirmedCount: 0,
          suspectedCount: 0,
          curedCount: 0,
          deadCount: 0,
        };
      } else {
        ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
        ncovDataObj[countryName].confirmedCount += confirmedCount;
        ncovDataObj[countryName].suspectedCount += suspectedCount;
        ncovDataObj[countryName].curedCount += curedCount;
        ncovDataObj[countryName].deadCount += deadCount;
      }
    } else {
      ncovDataObj[countryName] = {
        countryName,
        countryEnglishName,
        currentConfirmedCount,
        confirmedCount,
        suspectedCount,
        curedCount,
        deadCount,
      };
    }
  });
  const geoObj: any = {};
  geodata.features.forEach((feature: any) => {
    const { name } = feature.properties;
    geoObj[name] = feature.properties;
    const ncov = ncovDataObj[name] || {};
    feature.properties = {
      ...feature.properties,
      ...ncov,
    };
  });
  return geodata;
}

const World = React.memo(function Map() {
  // const [data, setData] = React.useState();
  // const [filldata, setfillData] = React.useState();
  // const [popupInfo, setPopupInfo] = React.useState<{
  //   lnglat: number[];
  //   feature: any;
  // }>();
  // React.useEffect(() => {
  //   const fetchData = async () => {
  //     const [geoData, ncovData, gridData] = await Promise.all([
  //       fetch(
  //         'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
  //       ).then(d => d.json()),
  //       // https://lab.isaaclin.cn/nCoV/api/area?latest=1
  //       fetch(
  //         'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
  //       ).then(d => d.json()),
  //       fetch(
  //         'https://gw.alipayobjects.com/os/bmw-prod/8990e8b4-c58e-419b-afb9-8ea3daff2dd1.json',
  //       ).then(d => d.json()),
  //     ]);
  //     const worldData = joinData(geoData, ncovData.results);
  //     const pointdata = worldData.features.map((feature: any) => {
  //       return feature.properties;
  //     });
  //     setfillData(gridData);
  //     setData(pointdata);
  //   };
  //   fetchData();
  // }, []);
  // function showPopup(args: any): void {
  //   setPopupInfo({
  //     lnglat: args.lngLat,
  //     feature: args.feature,
  //   });
  // }
  const [data, setData] = React.useState();
  React.useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        // 'http://localhost:3333/line',
        "https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json",
      );
      const adddata = await response.json();
      console.log('nei:');
      // console.log(data);
      await setData(adddata);
      console.log(adddata['features'][0]);
    };
    fetchData();
  }, []);

  return (
    <div className={styles.chidren}>
      <MapboxScene
        map={{
          center: [120.19382669582967, 30.258134],
          pitch: 0,
          zoom: 16,
          style: 'dark',
          token:
            'pk.eyJ1IjoibGl3ZnRjIiwiYSI6ImNrOTFlZGZxYjBibzkzbW14ZXRjbzJqemoifQ.cWnD9oou-gHh0SRYSxIlRQ',
        }}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        {/* <SceneEvent
          type="Loaded"
          handler={() => {
            fetch(
              'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
            )
              .then(res => res.json())
              .then(data => {
                // const layer = new LineLayer()
                //   .source(data)
                //   .size(1.5)
                //   .shape('line')
                //   .color('')
                //   .animate({
                //     interval: 1, // 间隔
                //     duration: 1, // 持续时间，延时
                //     trailLength: 2, // 流线长度
                //   });
                // scene.addLayer(layer);
              });
          }}
        /> */}
        {data && (
          <LineLayer
            source={{
              data,
            }}
            shape={{
              values: 'line',
            }}
            size={{
              values: 1.5,
            }}
            color={{ values: '#25d8b7' }}
            animate={{
              interval: 1, // 间隔
              duration: 1, // 持续时间，延时
              trailLength: 2, // 流线长度
            }}
          ></LineLayer>
        )}
      </MapboxScene>
      {/* <App /> */}
    </div>
  );
});
// ReactDOM.render(<World />, document.getElementById('map'));
export default World;

// ReactDOM.render(<MapScene/>, document.getElementById('map'));

// export default () => {
//   return (
//     <div>
//       <h1 className={styles.title}>Page index</h1>
//     </div>
//   );
// }
